<template>
  <div class="health-tips">

    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="item" @click="details(item.id)" v-for="(item,index) in list" :key="index">
        <div class="item-l">
          <div class="top">{{item.title}}</div>
          <div class="foot">
            <p>{{item.add_date}}</p>
          </div>
        </div>
        <div class="item-r">
          <img :src="item.file_url"/>
        </div>
      </div>
    </van-list>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
        loading: false,
        finished: false,
        page:1,
      }
    },
    created() {
      this.getlist(1)
    },
    mounted(){
      
    },
    methods: {
      onLoad() {
        // 异步更新数据
        setTimeout(() => {
          this.page+=1
          this.getlist(this.page)
        }, 500);
      },
      // 健康常识   列表
      getlist(page){
        this.$get("api/gzh_index.php?action=health_list", {
          page:page,
          limit:20
        }).then(res => { 
          console.log(res.data,'res.data')
          this.loading=false
          if(page==1){
            if(res.data.length==0){
              //加载完毕
              this.finished=true
            }else{
              this.list = res.data
            }
            if(res.data.length>0&&res.data.length<20){
              //加载完毕
              this.finished=true
            }
          }else{
            if(res.data.length==0){
              this.finished=true
            }else{
              for (const key in res.data) {
                this.list.push(res.data[key])
              }
            }
            if(res.data.length>0&&res.data.length<20){
              this.finished=true
            }
              
          }
        }).catch(err => {

        });
      },


      // 跳转详情页面
      details(id){
        this.$router.push({  //核心语句
          path:'/health-details',   //跳转的路径
          query:{            //路由传参时push和query搭配使用 ，作用时传递参数
            id:id ,  
          }
        })
      },
    },
  }
</script>

<style scoped>
.health-tips{
  width: 100%;
  height: 100%;
  
  border-top: 1px solid #F6F6F6;
}
.item{
  width:691px;
  height: 260px;
  border-bottom: 1px solid #EBEBEB;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.item-l .top{
  font-size:30px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(0,0,0,1);
  line-height:40px;
}
.item-l .foot{
  font-size:24px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height:30px;
  margin-top: 49px;
  display: flex;
  align-items: center;
}
.item-l .foot img{
  width:38px;
  height:38px;
  margin-right: 6px;
}
.item-r{
  width:204px;
  height:150px;
  border-radius:10px;
}
.item-r img{
  width:204px;
  height:150px;
  border-radius:10px;
}
</style>
<style scoped>
  
  .van-list{
      height:100vh;
      overflow: hidden;
      overflow-y: scroll;
  }
  .van-list__error-text, .van-list__finished-text, .van-list__loading, .van-pull-refresh__head{
    font-size: 28px;
  }
</style>